<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="customerTitle1">
          <div>
            <span><span class="leve_title" >寄售结算单详情</span>
             <div class="add_order_font1">
           <span>
             <span>
               单据号：
             </span>
             <span>
               {{orderInfoList && orderInfoList.uid}}
             </span>
           </span>
            <span>
             <span class="add_order_font2">
               订单状态：
             </span>
             <span >
               {{orderInfoList && orderInfoList.status_str}}
             </span>
           </span>
              <span class="add_order_font2">销售员： {{orderInfoList && orderInfoList.update_user_name}} 部门-{{orderInfoList && orderInfoList.sales_dept_name}} </span>
           </div>
            </span>
          </div>
          <div >
            <el-button
              @click="back"
            >
              {{'返回'}}
            </el-button>
          </div>
        </div>
      </template>
      <div>
        <SalesStage :steps="arr_approve" @clickValue="(va)=>{
          statusType = va
        }"/>
      </div>
    </el-card>
    <div v-if="statusType==1">
      <el-card>
        <template #header>
          <span class="leve2_title" >寄售产品信息</span>
        </template>
        <div class="products_div3" style="margin-top: 0">
          <div>
          <span class="products_div2" v-for="(item,index) in products_number" :key="index">
          <span>
            {{item.label}}
          </span>
          <span class="products_font2">
            {{item.type == 2 ?Number(item.value).toFixed(2) : Number(item.value)}}
        </span>
        </span>
          </div>
          <div>
          </div>
        </div>
        <div>
          <el-table
            load="false"
            ref="singleTableRef"
            :data="customer_order_list"
            max-height="300px"
            style="width: 100%"
            :tooltip-options="{ enterable: true, placement: 'top' }"
            tooltip-effect="dark"
            highlight-current-row
            @current-change="handleSelectionChange"
          >
            <el-table-column label="序号" align="center" width="80" fixed="left" show-overflow-tooltip>
              <template #default="scope">
                <div class="table_style">
                  <span style="margin-left: 5px"
                        v-text="(scope.$index + 1)"
                  ></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="产品编码" align="center" min-width="150" fixed="left" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis"
               >
                 {{scope.row.goods_no || '--' }}
               </span>
              </template>
            </el-table-column>
            <el-table-column label="产品名称" align="center" min-width="180" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis"
                 style="text-align: left"
                 v-text="_FieldFormat(scope.row.goods_name,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="条码" align="center" min-width="150" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.barcode  ,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="规格型号" align="center" width="210" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.spec_name,  '')"
               ></span>
              </template>
            </el-table-column>
<!--            <el-table-column label="调出仓库" align="center" width="110" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis"
                 style="cursor: default;text-align: left "
               >
                 {{scope.row.warehouse_name || '&#45;&#45;'}}
               </span>
              </template>
            </el-table-column>-->
            <el-table-column label="仓库" align="center" prop="sales_num" width="110" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.consignment_warehouse_name,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="产品类型" align="center" width="130" prop="total_amount" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis "
               >
                {{scope.row.goods_type || '--' }}
               </span>
              </template>
            </el-table-column>
            <el-table-column label="累计待结数量" align="center" width="160" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
               >{{scope.row.batch_usable_num}}</span>
              </template>
            </el-table-column>
            <el-table-column label="本次结算数量" align="center" width="150" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
               >{{scope.row.sales_num}}</span>
              </template>
            </el-table-column>
            <el-table-column label="剩余待结数量" align="center" min-width="150" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
               >{{scope.row.batch_usable_num - scope.row.sales_num}}</span>
              </template>
            </el-table-column>
            <el-table-column label="结算单价" align="center" min-width="150" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
                 v-text="_FieldFormat(scope.row.including_tax_price  ,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="含税单价" align="center" min-width="150" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
                 v-text="_FieldFormat(scope.row.price,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="改价原因" align="center" min-width="150" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.price_remark  ,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="税率" align="center" min-width="150" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
                 v-text="_FieldFormat(scope.row.tax_rate  ,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="价税合计" align="center" min-width="150" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
                 v-text="_FieldFormat(scope.row.total_amount  ,  '')"
               ></span>
              </template>
            </el-table-column>
<!--            <el-table-column label="库存组织" align="center" min-width="150" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat('无',  '')"
               ></span>
              </template>
            </el-table-column>-->
            <el-table-column label="销售单位" align="center" min-width="150" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.sales_unit  ,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="品牌" align="center" min-width="150" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis"
                 v-text="_FieldFormat(scope.row.brand_name  ,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="不含税单价" align="center" min-width="150" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
                 v-text="_FieldFormat(scope.row.order_price  ,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="税额" align="center" min-width="150" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
                 v-text="_FieldFormat(scope.row.tax  ,  '')"
               ></span>
              </template>
            </el-table-column>
            <el-table-column label="不含税金额" align="center" min-width="150" show-overflow-tooltip>
              <template #default="scope">
               <span
                 class="ellipsis numberMoney"
                 v-text="_FieldFormat(scope.row.amount  ,  '')"
               ></span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <VabCard>
        <template #header>
          <span class="leve2_title" >寄售基础信息</span>
        </template>
        <template #default >
          <el-row :gutter="24">
            <el-col
              v-for="(item, i) in procure_list"
              :key="i"
              :xs="24"
              :sm="12"
              :md="12"
              :lg="8"
              :xl="8"
            >
              <div class="detail-mode"  v-if="item.label != '详细地址'">
                <span class="label procureFont1">{{ item.label }}</span>
                <span class="text procureFont2">
                {{ item.value}}
                </span>
              </div>
              <div class="detail-mode" v-if="item.label == '详细地址'">
                <span class="label procureFont1">{{item.label}}</span>
                <span class="text height procureFont2">
                  {{ item.value}}
                </span>
              </div>
            </el-col>
          </el-row>
        </template>
      </VabCard>
      <AuditInformation type="settle_order"/>
      <OrderLog ref="orderLog" />
    </div>
    <div v-else>
      <el-card>
        <template #header>
          <div class="customerTitle1">
            <span class="leve2_title">销售出库信息</span>
            <div >
              <el-button
                @click="refresh"
              >
                刷新
              </el-button>
              <el-button
                class="customerButton1"
                plain
                type="primary"
                @click="download"
              >
                下载
              </el-button>
            </div>
          </div>
        </template>
        <el-table
          highlight-current-row
          :load="loading"
          ref="singleTableRef"
          border
          :data="customer_order_list"
          max-height="300px"
          style="width: 100%"
          class="table_style1"
          @current-change="handleCurrentChange"
        >
          <el-table-column label="序号" align="center" width="80" fixed="left">
            <template #default="scope">
              <div class="table_style">
              <span style="margin-left: 5px"
                    v-text="(scope.$index + 1)"
              ></span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="订单号" align="center" min-width="150" fixed="left">
            <template #default="scope">
            <span
              class="ellipsis"
            >
              {{ _FieldFormat(scope.row.uid,  '')}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="客户" align="center" min-width="170">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.customer_name || '--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="销售组织" align="center" width="150">
            <template #default="scope">
              <span
                class="ellipsis"
              >
               {{scope.row.sales_org_name || '--'}}
             </span>
            </template>
          </el-table-column>
          <!--        <el-table-column label="价目表" align="center" width="130">
                    <template #default="scope">
                        <span
                          class="ellipsis"
                        >
                       {{scope.row.price_list_name || '&#45;&#45;'}}
                       </span>
                    </template>
                  </el-table-column>-->
          <el-table-column label="销售数量" align="center" width="100">
            <template #default="scope">
              <span
                class="ellipsis numberMoney"
              >
              {{Number(scope.row.sales_num).toFixed(0)||'0'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="出库数量" align="center" width="100">
            <template #default="scope">
              <span
                class="ellipsis numberMoney"
              >
              {{Number(scope.row.out_num).toFixed(0)||'0'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="待出数量" align="center" width="130">
            <template #default="scope">
              <span
                class="ellipsis numberMoney"
              >
             {{Number(scope.row.wait_num).toFixed(0)||'0'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="运输方式" align="center" width="110">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.transport_type_str || '--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="费用结算" align="center" width="130">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.payment_type == '1'?'运费到付':'运费预付'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="收货地址" align="center" width="200">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.shipping_address}}
              {{scope.row.address}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="收货联系人" align="center" width="110">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.contact_user || '--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="联系电话" align="center" width="120">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.contact_tel || '--'}}
             </span>
            </template>
          </el-table-column>
          <el-table-column label="销售员" align="center" width="120">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.sales_user_name || '--'}}
             </span>
            </template>
          </el-table-column>
          <!--        <el-table-column label="销售组织" align="center" width="120">-->
          <!--          <template #default="scope">-->
          <!--              <span-->
          <!--                class="ellipsis"-->
          <!--              >-->
          <!--              {{scope.row.sales_org_name || '&#45;&#45;'}}-->
          <!--             </span>-->
          <!--          </template>-->
          <!--        </el-table-column>-->
          <el-table-column label="销售部门" align="center" width="120">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.sales_dept_name || '--'}}
             </span>
            </template>
          </el-table-column>
          <!--        <el-table-column label="销售组" align="center" width="120">-->
          <!--          <template #default="scope">-->
          <!--              <span-->
          <!--                class="ellipsis"-->
          <!--              >-->
          <!--              {{scope.row.sales_group_name || '&#45;&#45;'}}-->
          <!--             </span>-->
          <!--          </template>-->
          <!--        </el-table-column>-->
          <el-table-column label="备注" align="center" width="150">
            <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.remark || '--'}}
             </span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card>
        <template #header>
          <div class="customerTitle1">
            <span class="leve2_title leave3Title titleHead1">产品信息<span class="title1">{{detailList && "订单号" +detailList.uid}}</span></span>
          </div>
        </template>
        <div>
          <el-table
            :load="detailLoading"
            border
            :data="detailList && detailList.stock_out_detail"
            max-height="300px"
            style="width: 100%"
            class="table_style1"
          >
            <el-table-column label="序号" align="center" width="80" fixed="left">
              <template #default="scope">
                <div class="table_style">
                <span style="margin-left: 5px"
                      v-text="(scope.$index + 1)"
                ></span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="产品编码" align="center" fixed="left" min-width="120">
              <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.goods_no || '--'}}
             </span>
              </template>
            </el-table-column>
            <el-table-column label="产品名称" align="center" fixed="left" min-width="170">
              <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.goods_name || '--'}}
             </span>
              </template>
            </el-table-column>
            <el-table-column label="条码" align="center" width="150">
              <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.barcode || '--'}}
             </span>
              </template>
            </el-table-column>
            <el-table-column label="出库单号" align="center" fixed="left" width="150">
              <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.delivery_order_id||'--'}}
             </span>
              </template>
            </el-table-column>
            <el-table-column label="调出仓库" align="center" width="120" >
              <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.warehouse_name || '--'}}
             </span>
              </template>
            </el-table-column>
            <el-table-column label="调入仓库" align="center" width="120" >
              <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.consignment_warehouse_name || '--'}}
             </span>
              </template>
            </el-table-column>
            <el-table-column label="单位" align="center" width="100">
              <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.sales_unit || '--'}}
             </span>
              </template>
            </el-table-column>
            <el-table-column label="出库数量" align="center" width="100">
              <template #default="scope">
              <span
                class="ellipsis numberMoney"
              >
              {{Number(scope.row.actual_qty).toFixed(0) || '0'}}
             </span>
              </template>
            </el-table-column>
            <el-table-column label="货位" align="center" width="100">
              <template #default="scope">
              <span
                class="ellipsis numberMoney"
              >
              {{'无'}}
             </span>
              </template>
            </el-table-column>
            <el-table-column label="批次号" align="center" width="120">
              <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.batch_no || '--'}}
             </span>
              </template>
            </el-table-column>
            <el-table-column label="生产日期" align="center" width="120">
              <template #default="scope">
              <span
                class="ellipsis"
              >
               {{ _FieldFormat(scope.row.product_date,  '')}}
             </span>
              </template>
            </el-table-column>
            <el-table-column label="有效期至" align="center" width="120">
              <template #default="scope">
              <span
                class="ellipsis"
              >
             {{ _FieldFormat(scope.row.expire_at,  '')}}
             </span>
              </template>
            </el-table-column>
            <el-table-column label="规格型号" align="center" width="100">
              <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.spec_name || '--'}}
             </span>
              </template>
            </el-table-column>
            <el-table-column label="品牌" align="center" width="100">
              <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.brand_name || '--'}}
             </span>
              </template>
            </el-table-column>
            <el-table-column label="产品类型" align="center" width="100">
              <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.goods_type || '--'}}
             </span>
              </template>
            </el-table-column>
            <el-table-column label="销售单位" align="center" width="100">
              <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.sales_unit || '--'}}
             </span>
              </template>
            </el-table-column>
            <el-table-column label="销售数量" align="center" width="100">
              <template #default="scope">
              <span
                class="ellipsis numberMoney"
              >
              {{scope.row.sales_num || '--'}}
             </span>
              </template>
            </el-table-column>
            <el-table-column label="效期要求" align="center" width="100">
              <template #default="scope">
              <span
                class="ellipsis"
              >
              {{scope.row.expire_date || '--'}}
             </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import AuditInformation from '/@/views/order_management/component/AuditInformation.vue'
import OrderLog from '/@/views/order_management/component/OrderLog.vue'
import { ref } from "vue";
import router from "/@/router";
import { FieldFormat } from "/@/utils/utils";
import SalesStage from '/@/views/afterSales/component/SalesStage.vue'
import { ElMessage } from "element-plus";
import { orderInfo } from "/@/api/dms/order";
defineOptions({
    name: 'ConsignmentDetails',
  })
const _FieldFormat = (value: string, type = '') => {
  return FieldFormat(value, type)
}
const orderInfoList = ref(undefined)
const route:any = useRoute()
const statusType = ref(1)
const arr_approve = ref([
  { title: '寄售结算单', active: true,type:1},
  { title: '销售出库单', active: false,type:2 },
])
const procure_list = ref([
  {label:'客户',value:''},
  {label:'销售组织',value:''},
  {label:'开票类型',value:''},
  {label:' 期望运输方式',value:''},
  {label:'运费付款方式',value:''},
  {label:'收货地址',value: ''},
  {label:'详细地址',value:''},
  {label:'收货联系人',value:''},
  {label:'联系电话',value:''},
  {label:'销售员',value:''},
])
const products_number = ref<any>([
  {label:'销售数量',item:'sales_num',value:  0,type:'1'},
  {label:'计价数量',item:'pricing_num',value: 0,type:'1'},
  {label:'不含税金额',item:'amount',value: 0.00,type:'2'},
  {label:'税额',item:'tax',value: 0.00,type:'2'},
  {label:'价税合计',item:'total_amount',value: 0.00,type:'2'},
])
const back = ()=>{
  router.push(`/order/consignment`)
}
// 销售出库
const loading = ref<boolean>(false)
const detailLoading = ref<boolean>(false)
const detailList = ref<any>()
const customer_order_list = ref<any>([])
const singleTableRef = ref<any>(undefined)
const handleCurrentChange =(va:any,i:any)=>{
  if(i == null) return
  detailList.value = va
}
const getCustomerInfo =()=>{}
// 刷新
const refresh = ()=>{
  getCustomerInfo()
  ElMessage.success(`刷新成功`)
}
// 下载
const download = ()=>{
  console.log('下载')
}
const getOrderInfo = ()=>{
  if(route.query.id){
    orderInfo({uid:route.query.id}).then((data:any)=>{
      const list = data.data
      if(data.code === 200){
        orderInfoList.value = data.data
        procure_list.value=[
          {label:'客户',value:list.customer_name},
          {label:'销售组织',value:list.sales_org_name},
          {label:'开票类型',value:list.invoice_name},
          {label:'期望运输方式',value:list.transport_type_name},
          {label:'运费付款方式',value:list.payment_type == '1'?'运费到付' :'运费预付'},
          {label:'收货地址',value: list.shipping_address},
          {label:'详细地址',value:list.address},
          {label:'收货联系人',value:list.contact_user},
          {label:'联系电话',value:list.contact_tel},
          {label:'销售员',value:list.update_user_name},
        ]
        products_number.value = [
          {label:'销售数量',item:'sales_num',value:list.sales_num,type:'1'},
          {label:'计价数量',item:'pricing_num',value:list.pricing_num,type:'1'},
          {label:'不含税金额',item:'amount',value:list.amount,type:'2'},
          {label:'税额',item:'tax',value: list.tax,type:'2'},
          {label:'价税合计',item:'total_amount',value: list.total_amount,type:'2'},
        ]
        customer_order_list.value = list.detail
      }
    })
  }
}
onMounted(()=>{
  getOrderInfo()
})
</script>

<style lang="scss" scoped>
@import "../../index";
</style>
